<template>
  <div>
    <a-list :dataSource="data">
      <template #renderItem="{ item }">
        <a-list-item @click="selectItem(item)">
          <a-list-item-meta :title="item."></a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import type { TableResponse } from '@/api/config/types';
import { rowsToOptions } from '@/utils/common/bin';
type Row = {
  label: string;
  value: string;
  key: string;
  title: string;
};
type Props = {
  query: () => Promise<TableResponse<any>>;
  /* 标题的KEY */
  labelField: string;
  /* 值的KEY */
  valueFiled: string;
  modelValue: any;
};

const data = ref<Row[]>([]);

const emit = defineEmits(['update:modelValue']);
const props = defineProps<Props>();
const getData = async () => {
  const { rows } = await props.query();
  data.value = rowsToOptions({
    labelKey: props.labelField,
    valueKey: props.valueFiled,
    rows,
  });
};

const selectItem = (item: Row) => {
  emit('update:modelValue', item.value);
};
onMounted(async () => {
  getData();
});
</script>

<style lang="scss" scoped></style>
